<template>
    <div class="container" style="width: 100%;">
        <el-form :inline="true" :model="data" class="demo-form-inline">
            <el-form-item label="活动时间" prop="canShuTime">
                <el-date-picker v-model="data.selectedDate" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" range-separator="至" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="Query">搜索</el-button>
                <el-button type="info">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- Echarts -->
        <div ref="pieChartContainer" style="width: 1200px; height: 300px; margin: 20px"></div>
        <div ref="chartContainer" style="width: 1200px; height: 300px; margin: 20px"></div>
        <div>
            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="时间" width="200" />
                <el-table-column prop="count" label="线索增量" width="200" />
                <el-table-column prop="available" label="线索存量" width="700" />
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch, reactive } from 'vue';
import { ElMessage, FormInstance, TabsPaneContext } from 'element-plus';
import { channel, businessSouSuo } from '../../../api/login';
import * as echarts from 'echarts';
import tab from '@/plugins/tab';
import { formdata } from "./format"
// 列表
const tableData = ref([]);
const xData = computed(() => tableData.value.map(item => item.name));
// 引用图表容器
const chartContainer = ref<HTMLElement | null>(null);
const pieChartContainer = ref<HTMLElement | null>(null);

// 初始化 ECharts 图表
const initChart = () => {
    if (chartContainer.value) {
        const myChart = echarts.init(chartContainer.value);
        const option: echarts.EChartsOption = {
            color: ['#68cbed'],
            title: {
                text: '活动有效率分析',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: xData.value
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                data: ['活动线索有效率'],
                bottom: 'bottom'
            },
            series: [
                {
                    name: '活动线索有效率',
                    data: tableData.value.map(item => item.available),
                    type: 'line'
                }
            ]
        };
        myChart.setOption(option);
    }
};
const initPieChart = () => {
    if (pieChartContainer.value) {
        const myPieChart = echarts.init(pieChartContainer.value);
        const pieData = tableData.value.map(item => ({
            value: item.count,
            name: item.name
        }));
        const option: echarts.EChartsOption = {
            title: {
                text: '活动总数分析',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                bottom: 10,
                top: 'top',
                left: 'left',
                orient: 'vertical',
                // width: 10,
                // right: 10,
                data: pieData.map(item => item.name)
            },
            series: [
                {
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data: pieData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myPieChart.setOption(option);
    }
};

// 日期的

const data = ref({
    selectedDate: [],
});
const formattedDate = ref([]);
watch(() => data.value.selectedDate, (newVal) => {
    newVal.forEach(el => {
        formattedDate.value.push(formdata.formDate(el));
    });

})
// watch(() => canShu.canShuTime, (newVal) => {
//     console.log(newVal)
//     const formatTimeArray = ref([])
//     newVal.forEach(el => {
//         console.log(el)
//         formatTimeArray.value.push(formdata.formDate(el))
//         canShu.value.canShuTime = formatTimeArray.value[0]
//         canShu.value.updateTime = formatTimeArray.value[1]
//     });
// })
// 搜索
const canShu = reactive({
    canShuTime: [],
    createTime: [],
    updateTime: []
})
const Query = () => {
    const { createTime, updateTime } = canShu;
    businessSouSuo(createTime, updateTime).then((res: any) => {
        if (res.code !== 200) return ElMessage.error("查询团队失败");
        tableData.value = res.rows;
        console.log(formattedDate.value)
    });
};

const getTeamList = () => {
    channel().then((res: any) => {
        if (res.code !== 200) return ElMessage.error("查询线索失败");
        if (res.code = 200) {
            tableData.value = res.data;
            console.log(res)
            // console.log(xData.value)
            // total.value = res.total;
            initChart();
            initPieChart();
        }
    });
};
onMounted(() => {
    getTeamList();
    // initChart();
});

</script>

<style lang="scss" scoped>
// 日期的
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
}

.line {
    width: 1px;
    background-color: var(--el-border-color);
}
</style>